<template>
  <div>
    <el-dialog
      class="dialog"
      :title="catalogID?'修改目录':'新增目录'"
      :visible="addVisible"
      width="40%"
      @close="addCancel"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="所属学科" prop="subjectName">
          <el-select v-model="ruleForm.subjectName" placeholder="请选择" @change="selectData($event)">
            <el-option
              v-for="(item) in subjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="ruleForm.directoryName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDirectorydetailsAPI, addDirectoryListAPI, updateDirectoryAPI } from '@/api'
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    subjectList: Array,
    addVisible: Boolean,
		// eslint-disable-next-line vue/require-default-prop
    updateData: Object,
		// eslint-disable-next-line vue/require-default-prop
    catalogID: {
      type: [String, Number]
    }
  },
  data() {
    return {
      ruleForm: {
        subjectName: '',
        directoryName: ''
      },
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectName: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ]
      },
      ID: ''
    }
  },
  watch: {
    /**
     * 监听 父组件中 传来的row，props 一接收到数据 就将编辑框中的数据回显
     */
    updateData: {
      handler(value) {
        if (value) {
          this.ruleForm.subjectName = value.subjectName
          this.ruleForm.directoryName = value.directoryName
        } else {
					this.ruleForm.subjectName = ''
          this.ruleForm.directoryName = ''
				}
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getDirectorydetails()
  },
  methods: {
    /**
     * 确定 添加目录
     */
    confirm() {
      if (this.catalogID) {
        /** 如果有id 就是编辑功能*/
        this.editCatalog()
      } else {
        this.addCatalog()
      }

    },

    /** 新增目录 */
    addCatalog() {
      this.$refs.ruleFormRef.validate(async(isok) => {
        if (!isok) return
        await addDirectoryListAPI(this.ID, this.ruleForm.directoryName)
      })
      // 关闭弹窗
      this.$emit('update:addVisible', false)
      // 提示用户
      this.$message.success('添加目录成功')

    },

    /** 编辑目录 */
    async editCatalog() {
      await updateDirectoryAPI(this.catalogID, this.updateData.subjectID, this.ruleForm.directoryName)
      // 关闭弹窗
      this.$emit('update:addVisible', false)
      // 提示用户
      this.$message.success('更新目录成功')

    },



    /**
     * change事件 获取id
     */
    selectData(result) {
      this.ID = result
    },


    /**
     * 目录详情
     */
    async getDirectorydetails() {
      await getDirectorydetailsAPI(this.ID)
    },

		/** *
		 *点击取消按钮，关闭弹出层，清空数据
		 *
		*/
		addCancel() {
			this.$emit('update:addVisible', false)
			this.$parent.getSubject()
			this.$refs.ruleFormRef.resetFields()
		}
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
	margin-top: 150px;
}
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
</style>
